<template>
	<view class="content">

		<!-- 用户信息部分 -->
		<view class="user_div">
			<!-- 头像 昵称 手机号等 -->
			<view style="display: flex;align-items: center;">
				<!-- 头像 -->
				<image class="img_header" :src="avatar"></image>
				<!-- 昵称 手机号等 -->
				<view>
					<view v-if="isLogin" class="u_name">{{nickname || '发物流用户'}}</view>
					<view v-else class="u_name" @click.stop="onOk(2)">尚未登录</view>
					<view class="u_name">{{tel || '--'}}</view>
				</view>
			</view>
			<!-- 客服 设置按钮 -->
			<view style="display: flex;">
				<image class="user_img" src="/static/ic_mine_11.png" @click.stop="onService"></image>
				<image class="user_img" src="/static/ic_mine_12.png"></image>
			</view>
		</view>

		<!-- 个人账户部分 -->
		<view class="part_div_1">
			<view style="display: flex;justify-content: space-between;align-items: center;margin: 0 24rpx 0 0;">
				<!-- <view style="font-weight: bold;margin: 24rpx;">个人账户</view> -->
				<view style="font-weight: bold;margin: 24rpx;">用户积分</view>
				<view style="margin: 0 0 0 24rpx;font-size: 28rpx;color: #999;">可用积分 <span style="font-size: 36rpx;margin: 0 0 0 4rpx;color: red;margin: 0 0 0 12rpx;">0</span></view>
			</view>
			<view class="menu_item_div">
				<view class="menu_item" @click.stop="onMenuClick(-2)">
					<image src="/static/ic_mine_menu_record.png"></image>
					<!-- <view>奖励记录</view> -->
					<view>浏览记录</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(-3)">
					<image src="/static/ic_mine_menu_about.png"></image>
					<view>领取奖励</view>
				</view>
				<view class="menu_item" style="display: none;" @click.stop="onMenuClick(-4)">
					<image src="/static/ic_mine_menu_hint.png"></image>
					<view>打印页面</view>
				</view>
			</view>
		</view>

		<!-- 物流管理部分 -->
		<view v-if="isLeader" class="part_div_1">
			<view style="font-weight: bold;margin: 24rpx;">物流管理</view>
			<view class="menu_item_div">
				<view class="menu_item" @click.stop="onMenuClick(-11)">
					<image src="/static/ic_mine_menu_order.png"></image>
					<view>运单管理</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(-12)">
					<image src="/static/ic_mine_menu_exit.png"></image>
					<view>更新公司信息</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(-13)">
					<image src="/static/ic_mine_menu_about.png"></image>
					<view>线路管理</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(-14)">
					<image src="/static/ic_mine_menu_hint.png"></image>
					<view>网点管理</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单部分 -->
		<view class="part_div_1">
			<view style="font-weight: bold;margin: 24rpx;">常用功能</view>
			<view class="menu_item_div">
				<view class="menu_item" @click.stop="onMenuClick(0)">
					<image src="/static/ic_mine_menu_address.png"></image>
					<view>地址管理</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(1)">
					<image src="/static/ic_mine_menu_order.png"></image>
					<view>订单管理</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(2)">
					<image src="/static/ic_mine_menu_record.png"></image>
					<view>通话记录</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(3)">
					<image src="/static/ic_mine_menu_policy.png"></image>
					<!-- <view>物流政策</view> -->
					<view>返回首页</view>
				</view>
			</view>

			<view class="menu_item_div">
				<view class="menu_item" @click.stop="onMenuClick(4)">
					<image src="/static/ic_mine_11.png"></image>
					<view>联系客服</view>
				</view>
				<view class="menu_item" style="display: none;" @click.stop="onMenuClick(5)">
					<image src="/static/ic_mine_menu_hint.png"></image>
					<view>使用教程</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(6)">
					<image src="/static/ic_mine_menu_about.png"></image>
					<view>关于我们</view>
				</view>
				<view class="menu_item" @click.stop="onMenuClick(7)">
					<image src="/static/ic_mine_menu_exit.png"></image>
					<view>切换用户</view>
				</view>
			</view>

		</view>

		<view v-if="isLogin" class="btn_ok" @click.stop="onOk">退出登录</view>
		<view v-else class="btn_ok" @click.stop="onOk(2)">点击登录</view>

		<!-- 底部客服弹窗 -->
		<uni-popup ref="service_popup">
			<view style="display: flex;flex-direction: column;background: white;">

				<!-- 标题 关闭 -->
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="visibility: hidden;padding: 24rpx;">空</view>
					<view style="font-weight: bold;font-size: 32rpx;">客服中心</view>
					<view style="padding: 24rpx;" @click.stop="onCloseService">×</view>
				</view>
				<!-- 客服电话 -->
				<view style="display: flex;flex-direction: column;align-items: center;background: #F97B24;border-radius: 12rpx;color: white;margin: 24rpx;" @click.stop="onPhone">
					<view style="margin: 24rpx;font-weight: bold;">☎ {{service_phone}}</view>
					<view style="margin:0 0 24rpx 0;">服务时间：00:00 - 24:00</view>
				</view>
				<!-- 底部占位 -->
				<view style="width: 100rpx;height: 68px;"></view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import { getUInfo, isLogin, isLeader } from '@/util/util.js'
	export default {
		data() {
			return {
				isLogin: false, // 是否登录
				isLeader: false, // 是否是负责人
				nickname: '',
				tel: '',
				avatar: '/static/ic_fwl.png',

				service_phone: '18653538531', // 客服电话
			}
		},

		onShow() {
			this.isLogin = isLogin()
			this.isLeader = isLeader()
		},

		onLoad() {
			let that = this

			this.nickname = getUInfo().nickname
			this.tel = getUInfo().tel
			// this.avatar = getUInfo().avatar
		},

		methods: {

			//拨打客服
			onPhone() {
				uni.makePhoneCall({ phoneNumber: `${this.service_phone}` })
			},

			// 点击客服按钮
			onService() {
				this.$refs.service_popup.open('bottom')
			},

			// 关闭客服弹窗
			onCloseService() {
				this.$refs.service_popup.close('bottom')
			},

			// 点击功能菜单项
			onMenuClick(type) {
				if (type == 0) {
					uni.navigateTo({ url: '/pages/mine/address_list' })
				} else if (type == 1) {
					uni.switchTab({ url: '/pages/settle_list/settle_list' })
				} else if (type == 2) {
					uni.switchTab({ url: '/pages/settle_list/settle_list' })
				} else if (type == 3) {
					uni.switchTab({ url: '/pages/index/index' })
				} else if (type == 4) {
					this.onService()
				} else if (type == 5) {
					uni.showToast({ icon: 'none', title: '敬请期待' })
				} else if (type == 6) {
					uni.showToast({ icon: 'none', title: '临沂昊昀信息科技有限公司' })
				} else if (type == 7) {
					this.onOk()
				} else if (type == -1) {
					// #ifdef WEB
					console.log('web页面...');
					window.print()
					// #endif
				} else if (type == -2) {
					uni.navigateTo({ url: '/pages/mine/reward/browse_record' })
				} else if (type == -3) {
					uni.showToast({ icon: 'none', title: '暂不满足条件' })
				} else if (type == -4) {
					// #ifdef WEB
					console.log('web页面...');
					// window.print()
					uni.navigateTo({ url: '/pages/sys/print' })
					// #endif
				} else if (type == -11) {
					// uni.showToast({ icon: 'none', title: '运单管理' })
					uni.navigateTo({ url: '/pages/mine/waybill/waybill_list' })
				} else if (type == -12) {
					uni.navigateTo({ url: `/pages/mine/manage/logcom_detail?id=${getUInfo().company_id}` })
				} else if (type == -13) {
					uni.navigateTo({ url: `/pages/mine/manage/logcom_detail?id=${getUInfo().company_id}` })
				} else if (type == -14) {
					uni.navigateTo({ url: `/pages/mine/manage/logcom_detail?id=${getUInfo().company_id}` })
				}
			},

			// 地址管理
			onAddress() {
				uni.navigateTo({ url: '/pages/mine/address_list' })
			},

			onOk(flag) {
				if (flag == 2) {
					uni.redirectTo({ url: '/pages/login/login' })
				} else {
					uni.showModal({
						title: '提示',
						content: '是否退出登录？',
						success: res => {
							if (res.confirm) {
								uni.removeStorageSync('userinfo')
								uni.redirectTo({ url: '/pages/login/login' })
							}
						}
					})
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #f8f8f8;
	}

	.user_div {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		margin: 50rpx 24rpx 50rpx 24rpx;
	}

	.img_header {
		width: 110rpx;
		height: 110rpx;
		border-radius: 888rpx;
		margin: 0 24rpx 0 0;
	}

	.u_name {
		font-size: 30rpx;
		font-weight: bold;
		margin: 0rpx 0 0 0;
	}

	.user_img {
		width: 44rpx;
		height: 44rpx;
		border: #F7D34B solid 1rpx;
		border-radius: 888rpx;
		padding: 10rpx;
		margin: 0 0 0 24rpx;
	}

	.part_div_1 {
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 12rpx;
		margin: 24rpx 24rpx 0 24rpx;
		padding: 0 0 0rpx 0;
	}

	.menu_item_div {
		display: flex;
		flex-wrap: wrap;
		margin: 24rpx 0 024rpx 0;
	}

	.menu_item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
	}

	.menu_item image {
		width: 40rpx;
		height: 40rpx;
		margin: 0rpx 0 8rpx 0;
	}

	.btn_ok {
		align-self: center;
		background: #F7D34B;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin: 48rpx 0 0 0;
		border-radius: 888rpx;
	}
</style>